<template class="container">
    <WindowTitleBar title="世界对比结果"></WindowTitleBar>
    <div class="regions" id="test">
        <div v-for="region in region_list">
            <div onclick="click_region(region)" class="region-title title">{{string.format("区域(%s) 区块数(%s)", region.region_key, region.chunk_count)}}</div>
            <div v-if="region_key == region.region_key" class="chunks">
                <div v-for="chunk in chunk_list">
                    <div onclick="click_chunk(chunk)" class="chunk-title title">{{string.format("区块(%s) 方块数(%s)", chunk.chunk_key, chunk.block_count)}}</div>
                    <div v-if="chunk_key == chunk.chunk_key">
                        <div v-for="block in block_list">
                            <div onclick="click_block(block)" class="block-title title">{{string.format("方块 坐标: %s, %s, %s", block.x, block.y, block.z)}}</div>
                            <div v-if="block_index == block.block_index" class="block_detail">
                                <div class="text">
                                    <div style="width: 80px;">方块ID</div>
                                    <div style="width: 40px;">{{block_detail.is_equal_block_id and "相同" or "不同"}}</div>
                                    <div style="width: 80px;">本地ID</div>
                                    <div style="width: 40px;">{{block_detail.local_block_id or 0}}</div>
                                    <div style="width: 80px;">远程ID</div>
                                    <div style="width: 40px;">{{block_detail.remote_block_id or 0}}</div>
                                </div>
                                <div class="text">
                                    <div style="width: 80px;">方块数据</div>
                                    <div style="width: 40px;">{{block_detail.is_equal_block_data and "相同" or "不同"}}</div>
                                    <div style="width: 80px;">本地数据</div>
                                    <div style="width: 40px;">{{block_detail.local_block_data or ""}}</div>
                                    <div style="width: 80px;">远程数据</div>
                                    <div style="width: 40px;">{{block_detail.remote_block_data or ""}}</div>
                                </div>
                                <div class="text">
                                    <div style="width: 80px;">实体数据</div>
                                    <div style="width: 40px;">{{block_detail.is_equal_entity_data and "相同" or "不同"}}</div>
                                    <!-- <div style="width: 120px;" class="text-btn">使用远程数据</div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</template>

<script type="text/lua" src="%ggs%/Command/DiffWorld/DiffWorldUI.lua">
RegisterComponent("WindowTitleBar", "%vue%/Components/WindowTitleBar.html");

function region_title_class(region)
    return "region-title " .. (region_key == region.region_key and "region-title-active" or "region-title-inactive");
end

function click_region(region)
    region_key = region.region_key;
    chunk_list = get_chunk_list();
end

function click_chunk(chunk)
    chunk_key = chunk.chunk_key;
    block_list = get_block_list();
end

function click_block(block)
    block_index = block.block_index;
    block_detail = get_block_detail(block);
end

</script>

<style scoped=true>
.container {
    width: 100%;
    height: 100%;
    /* height: 500px; */
    background-color: #00000080;
    color: #ffffff;
}
.regions {
    position: absolute;
    top: 40px;
    bottom: 2px;
    left: 0px;
    right: 0px;
    overflow: auto;
}
.title {
    width: 100%;
    height: 32px;
    line-height: 32px;;
}

.region-title {
    padding-left: 20px;
}

.chunk-title {
    padding-left: 40px;
}

.block-title {
    padding-left: 60px;
}

.block_detail {
    padding-left: 80px;
    width: 100%;
}

.text {
    display: flex;
    height: 32px;
    line-height: 32px;
}
.text-btn:hover {
    color: #cccccc;
}
</style>